<template>
  <div class="linearVerifi tapStyle secondary-page-mode">
    <div class="secondary-toolbar">
      <span>时间选择 : </span>
      <div class="layoutBox" style="width:242px">
            <el-date-picker v-model="dateRange" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </div>&emsp;&emsp;
       <span>监测项目 : </span>
      <div class="layoutBox" style="width:190px">
            <el-select v-model="value" multiple collapse-tags placeholder="请选择">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
      </div>&emsp;&emsp;
      <el-button @click="searchData"><i class="iconfont icon-sousuo"></i>查询</el-button>
      <el-button type='delet'><i class="iconfont icon-daochu"></i>导出</el-button>
    </div>
    <div class="currency-mode-wrap">
      <div class="reminder-wrap">
        <span class="reminder-title">温馨提示</span>
        <div class="reminder-content">
          <div class="reminder-text">
            <p>所选时间段内共有“多点线性核查移”x次，共有合格项m次，不合格项y次。影响数据n条。点位1、点位2的上次周核查时间距今已有7天；站点3的上次周核查距今已有6天。</p>
            <div><el-button type="noticonsecondBtn"> 生成任务 </el-button></div>
          </div>
        </div>
        <div class="reminder-toolbar">
          <div class="state-legend">
            <span><i class="qualified-icon"></i> 合格</span>
            <span><i class="unqualified-icon"></i> 不合格</span>
          </div>
          <div class="state-radio-wrap">
            <el-radio-group v-model="stateRadio" size="small" @change = "toggleTab">
              <el-radio-button label="1">当前断面</el-radio-button>
              <el-radio-button label="2">所有断面</el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
      <div class="currency-body-toggle">
        <div v-show="stateRadio === '1'" style="height: 100%">
          <div class="tablebox" style="height: calc(100% - 34px);">
            <el-table
              :data="tableData"
              border
              height="100%">
              <el-table-column
                prop="time"
                width="160"
                label="开始测试时间">
              </el-table-column>
              <el-table-column
                prop="indexName"
                label="监测项目">
              </el-table-column>
              <el-table-column
                prop="indexUnit"
                label="单位">
              </el-table-column>
              <el-table-column
                prop="firstPointValue"
                label="第1点">
              </el-table-column>
              <el-table-column
                prop="secondPointValue"
                label="第2点">
              </el-table-column>
              <el-table-column
                prop="thirdPointValue"
                label="第3点">
              </el-table-column>
              <el-table-column
                prop="fourthPointValue"
                label="第4点">
              </el-table-column>
              <el-table-column
                prop="coefficient"
                label="相关系数">
              </el-table-column>
              <el-table-column
                prop="operation"
                label="操作">
                <template slot-scope="scope">
                  <el-button  type='secondBtn'>启用</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="paginationBox">
            <el-pagination
              @size-change="paginationSizeChange"
              @current-change="paginationChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              background
              :small = "true"
              popper-class = "select-common-option"
              :page-sizes = "pageList"
              layout="total,sizes,slot,->,prev, pager, next, jumper"
              :total="totalRecords">
              <span class="el-pagination__current">当前第{{currentPage}}/{{totalPage}}页</span>
            </el-pagination>
          </div>
        </div>
        <div class="chart-wrap" v-show="stateRadio === '2'" style="height: 100%;">
          <div class="tablebox" style="height: calc(100% - 34px);">
            <el-table
              :data="tableData2"
              border
              height="100%"
              style="width: 100%">
              <el-table-column
                prop="province"
                label="省份">
              </el-table-column>
              <el-table-column
                prop="monitor"
                label="流域">
              </el-table-column>
              <el-table-column
                prop="basin"
                label="断面名称">
              </el-table-column>
              <el-table-column
                prop="testDate"
                width="160"
                label="开始测试时间">
              </el-table-column>
              <el-table-column
                prop="monitoringItems"
                label="监测项目">
              </el-table-column>
              <el-table-column
                prop="unit"
                label="单位">
              </el-table-column>
              <el-table-column
                prop="oneSpot"
                label="第1点">
              </el-table-column>
              <el-table-column
                prop="twoSpot"
                label="第2点">
              </el-table-column>
              <el-table-column
                prop="threeSpot"
                label="第3点">
              </el-table-column>
              <el-table-column
                prop="fourSpot"
                label="第4点">
              </el-table-column>
              <el-table-column
                prop="coefficient"
                label="相关系数">
              </el-table-column>
            </el-table>
          </div>
          <div class="paginationBox">
            <el-pagination
              @size-change="paginationSizeChange"
              @current-change="paginationChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              background
              :small = "true"
              popper-class = "select-common-option"
              :page-sizes = "pageList"
              layout="total,sizes,slot,->,prev, pager, next, jumper"
              :total="totalRecords">
              <span class="el-pagination__current">当前第{{currentPage}}/{{totalPage}}页</span>
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "linearVerifi",
  data() {
    return {
      dateRange: "",
      stateRadio: "1",
      value: ["w01001", "w21023", "w01009", "w01014", "w01003"],
      optionData: [   
        {
          value: "w01001",
          label: "pH"
        },
        {
          value: "w21023",
          label: "水温"
        },
        {
          value: "w01009",
          label: "溶解氧"
        },
        {
          value: "w01014",
          label: "电导率"
        },
        {
          value: "w01003",
          label: "浊度"
        }
      ],
      stationId: "",
      currentPage: 1,
      pageSize: 10,
      pageList: [10, 20, 35],
      totalRecords: 1000,
      tableData: [
        {
          testDate: "2019-02-15 14:04:10",
          monitoringItems: "高锰酸盐",
          unit: "mg/L",
          oneSpot: "0.4",
          twoSpot: "3.0",
          threeSpot: "5.2",
          fourSpot: "7.5",
          coefficient: "0.996"
        }
      ],
      tableData2: [
        {
          province: "江西省",
          monitor: "长江流域",
          basin: "吴城赣江",
          testDate: "2019-02-15 14:04:10",
          monitoringItems: "高锰酸盐",
          unit: "mg/L",
          oneSpot: "0.4",
          twoSpot: "3.0",
          threeSpot: "5.2",
          fourSpot: "7.5",
          coefficient: "0.996"
        }
      ]
    };
  },
  computed: {
    totalPage() {
      //计算总页数
      let number = 0;
      number = Math.ceil(this.totalRecords / this.pageSize);
      return number;
    },
    stationInfo: {
      get: function() {
        return this.$store.state.stationInfo;
      }
    }
  },
  methods: {
    paginationSizeChange() {},
    paginationChange() {},
    toggleTab(val) {
      // console.log(val);
    },
    //查询数据
    searchData() {
      this.getTableData();
    },
    //获取表格数据
    getTableData() {
      this.$http.get("/Quality/testData/multipointlinearityData", {
          params: {
            startTime: this.dateRange[0],
            endTime: this.dateRange[1],
            indexCodes: this.value.join(","),
            stationCodes: "10005", //this.stationId
            ifCurrentSection: true,// true为当前断面,false为所有
            pageNumber: this.currentPage,
            pageSize: this.pageSize
          }
        }).then(res => {
          if (res.data.code === 0) {
            this.tableData = res.data.content.dataList;
            this.totalRecords = res.data.content.totalRecords;
          }
        });
    }
  },
  mounted() {
    // this.createdChart();
  },
  created() {
    //初始化时间
    let startTime = new Date().setDate(new Date().getDate() - 2);
    let endTime = new Date();
    this.dateRange = [
      new Date(startTime).format("yyyy-MM-dd"),
      endTime.format("yyyy-MM-dd")
    ];
  },
  watch: {
    stationInfo(value) {
      if (value.length > 0) {
        this.stationId = value[0].nodeId;
        this.getTableData();
      }
    }
  }
};
</script>

<style scoped lang="less">
</style>
